<template>
    <div class="wrapper clearfix">
        <h2 class="statute-name">{{statute.name}}</h2>
        <div class="statute-right">
            <div class="chapter dragscroll">
                <h2>目录</h2>
                <dire :level="this.level" :dir="this.dirs"></dire>
            </div>
            <div class="latest-statute">
                <h2 class="latest-title">最新法规&nbsp;&nbsp;<Tag color="blue">New</Tag></h2>
                <ul class="statute-wrapper">
                    <li v-for="item in latestStatuteList"><a :href="'/statute-content?q='+item.id" class="ellipsis" :title="item.name">{{item.name}}</a></li>
                </ul>
            </div>
        </div>
        <div class="statute-left">
            <div class="statute-title">
                <!-- <h2>{{statute.name}}</h2> -->
                <p>发布日期：{{statute.inTimes}}&nbsp;&nbsp;|&nbsp;&nbsp;浏览次：{{statute.number.browse}}&nbsp;&nbsp;
                    <Tag color="green" v-if="statute.about_gold.read == 0 && !t">免费</Tag>
                    <Tag color="red" v-if="statute.about_gold.read > 0 && !t">VIP</Tag>
                </p>
                <div class="tools">
                    <Button type="success" size="small" @click="showChinese" v-if="!t && statute.uploads">点击查看中文</Button>
                    <Button type="error" size="small" @click="showChinese" v-if="t && statute.uploads">点击查看英文</Button>
                    <a :href="downloadUrl" download v-if="!t" class="btn-download btn-green">下载</a>
                    
                    <Button v-if="!statute.uploads" type="primary" size="small" @click="uploadWord" :disabled="member ? false : true">我要翻译</Button>
                    <span v-if="!statute.uploads">悬赏金币：{{statute.about_gold.upload}}</span>
                </div>
                <div class="jiathis_style_24x24" style="padding: 0 10px;">
                    <a class="jiathis_button_qzone"></a>
                    <a class="jiathis_button_tsina"></a>
                    <a class="jiathis_button_tqq"></a>
                    <a class="jiathis_button_weixin"></a>
                    <a class="jiathis_button_renren"></a>
                    <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
                </div>
                <div class="total-rate">
                    <Rate allow-half v-model="totalRata" disabled></Rate>
                    <Button type="ghost" size="small" @click="back" class="back">返回</Button>
                </div>
            </div>
            <article class="article">
                <div class="tool">
                    <a href="javascript:;" @click="showDialog(1)" class="evaluation"><i></i>评价</a>
                    <a href="javascript:;" @click="showDialog(2)" class="note"><i></i>写笔记</a>
                    <a href="javascript:;" @click="showDialog(3)" class="message"><i></i>留言</a>
                </div>
                <div class="article-wrapper dragscroll" ref="articleWrapper">
                    <div class="article-inside">
                        <canvas ref="canvas" id="canvas" ></canvas>
                    </div>
                </div>
                <div class="page">
                    <span>{{pageNum}}/{{totalNum}}</span>
                    <button class="btn btn-green" @click="onPrevPage()">上一页</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-green" @click="onNextPage()">下一页</button>
                </div>
            </article>

            <div class="comprehensive">
                <div class="comprehensive-header">
                    <ul>
                        <li @click="comprehensiveType = 1;"
                            class="evaluation"
                            :class="{'is-active':comprehensiveType == 1}">
                            <i></i>简介
                        </li>
                        <li @click="comprehensiveType = 2; fetchNote();"
                            class="note"
                            :class="{'is-active':comprehensiveType == 2}">
                            <i></i>笔记
                        </li>
                        <li @click="comprehensiveType = 3; fetchMessage();"
                            class="message"
                            :class="{'is-active':comprehensiveType == 3}">
                            <i></i>留言
                        </li>
                        <li @click="comprehensiveType = 4; fetchEvaluate();"
                            class="message"
                            :class="{'is-active':comprehensiveType == 4}">
                            <i></i>评价
                        </li>
                    </ul>
                </div>
                <div class="evaluation-block" v-show="comprehensiveType == 1">
                    <div class="eval-wrapper" style="text-indent: 2em; line-height:normal;">
                        <div v-html="statute.content" v-if="statute.content"></div>
                        <div class="no-more" v-else="!statute.content">暂无简介~</div>
                        <!-- <div class="wr-item" v-if="evaluation.list.length != 0" v-for="item in evaluation.list">
                            <div class="wrapper-header clearfix">
                                <div class="avatar">
                                    <Avatar icon="person" size="large" />
                                </div>
                                <div class="person">
                                    <p class="name">{{item.member.data.name}}&nbsp;&nbsp;
                                    <span class="time">{{item.created_at}}</span></p>
                                    <Rate :value="item.score" show-text disabled>
                                        <span v-if="item.score == 1">Unhelpful</span>
                                        <span v-if="item.score == 2">Not very helpful</span>
                                        <span v-if="item.score == 3">Fairyly helpful</span>
                                        <span v-if="item.score == 4">Helpful</span>
                                        <span v-if="item.score == 5">Very helpful</span>
                                    </Rate>
                                </div>
                            </div>
                        </div>
                        <div class="no-more" v-if="evaluation.list.length == 0">
                            <p>暂无简介~</p>
                            <div class="btn-block">
                                <Button type="success" size="small" @click="showDialog(1)">
                                    <Icon type="edit" size="14"></Icon>去评价
                                </Button>
                            </div>
                        </div> -->
                    </div>
                </div>
                <div clas="note-block" v-show="comprehensiveType == 2">
                    <div class="note-wrapper">
                        <div class="wr-item" v-if="note.list.length != 0" v-for="(item,index) in note.list">
                            <div class="content" v-html="item.content"></div>
                            <p class="time">{{item.created_at}}</p>
                        </div>
                        <div class="no-more" v-if="note.list.length == 0">
                            <p>暂无笔记~</p>
                            <div class="btn-block">
                                <Button type="success" size="small" @click="showDialog(2)">
                                    <Icon type="edit" size="14"></Icon>写笔记
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
                <div clas="note-block" v-show="comprehensiveType == 3">
                    <div class="note-wrapper">
                        <div class="message-modal clearfix" v-if="message.list.length != 0" v-for="(item,index) in message.list">
                            <div class="message-header">
                                <div class="avatar">
                                    <Avatar shape="square" icon="person" size="large" />
                                    <p class="name">{{item.member_name}}</p>
                                    <p class="time">{{item.created_at}}</p>
                                </div>
                            </div>
                            <div class="message-body">
                                <p class="content" v-html="item.content"></p>
                                <div class="leave-word clearfix" v-if="item.reply">
                                    <div class="avatar">
                                        <Avatar shape="square" icon="person"/>
                                    </div>
                                    <div class="leave-main">
                                        <p class="name">回复</p>
                                    </div>
                                    <p class="content">{{item.reply.data.content}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="no-more" v-if="message.list.length == 0">
                            <p>暂无留言~</p>
                            <div class="btn-block">
                                <Button type="success" size="small" @click="showDialog(3)">
                                    <Icon type="edit" size="14"></Icon>去留言
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="evaluation-block" v-show="comprehensiveType == 4">
                        <div class="eval-wrapper">
                            <div class="wr-item" v-if="evaluation.list.length != 0" v-for="item in evaluation.list">
                                <div class="wrapper-header clearfix">
                                    <div class="avatar">
                                        <Avatar icon="person" size="large" />
                                    </div>
                                    <div class="person">
                                        <p class="name">{{item.member.data.name}}&nbsp;&nbsp;
                                        <span class="time">{{item.created_at}}</span></p>
                                        <Rate :value="item.score" show-text disabled>
                                            <span v-if="item.score == 1">Unhelpful</span>
                                            <span v-if="item.score == 2">Not very helpful</span>
                                            <span v-if="item.score == 3">Fairyly helpful</span>
                                            <span v-if="item.score == 4">Helpful</span>
                                            <span v-if="item.score == 5">Very helpful</span>
                                        </Rate>
                                    </div>
                                </div>
                            </div>
                            <div class="no-more" v-if="evaluation.list.length == 0">
                                <p>暂无评价~</p>
                                <div class="btn-block">
                                    <Button type="success" size="small" @click="showDialog(1)">
                                        <Icon type="edit" size="14"></Icon>去评价
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        <Modal v-model="dialogForm" :title="dialogTitle">
            <div class="dialog-body">
                <Rate v-model="formEvaluate.score" show-text v-if="whichForm == 1">
                    <span v-if="formEvaluate.score == 1">Unhelpful</span>
                    <span v-if="formEvaluate.score == 2">Not very helpful</span>
                    <span v-if="formEvaluate.score == 3">Fairyly helpful</span>
                    <span v-if="formEvaluate.score == 4">Helpful</span>
                    <span v-if="formEvaluate.score == 5">Very helpful</span>
                </Rate>
                <Form ref="formNote" :model="formNote" v-if="whichForm == 2">
                    <FormItem>
                        <Input v-model="formNote.content" :rows="5" type="textarea" placeholder="写笔记..."></Input>
                    </FormItem>
                </Form>
                <Form ref="formMessage" :model="formMessage" v-if="whichForm == 3">
                    <FormItem>
                        <Input v-model="formMessage.content" :rows="5" type="textarea" placeholder="写留言..."></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="ghost" @click="close">关闭</Button>
                <Button type="primary" @click="save">确定</Button>
            </div>
        </Modal>
        <Modal v-model="upWord" title="上传翻译文件" v-if="statute">
            <Upload
                multiple
                type="drag"
                :data="uploadToken"
                :thumbnail-mode="true"
                action="http://up-z2.qiniu.com/"
                :on-success="handleAvatarSuccess"
                :default-file-list="filess"
                :show-upload-list="true"
                >
                <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>点击或将文件拖拽到这里上传,只能上传 DOC / PDF 文件,且文件大小不能超过 50MB!！</p>
                </div>
            </Upload>
        </Modal>
    </div>
</template>
<script type="text/javascript" src="./statute_content.js"></script>
<style type="text/css" scoped>
    .wrapper{ width:1200px; margin:40px auto; padding:0 30px;}
    .statute-left{ margin-right:400px;}
    .statute-right{ width:348px; float:right; margin-top:78px; position: relative;}
    /* .back{ margin-bottom:10px; } */
    .statute-name{ font-size:18px; line-height:1.5; padding-right:400px; text-align:justify;}
    .chapter{ height:400px; background:#fff; box-shadow:0 2px 8px rgba(96,96,96,0.4); border-radius:3px; padding:20px; overflow-y:auto; -webkit-overflow-scrolling: touch; cursor:-webkit-grab;}
    .chapter h2{ line-height:40px; position:absolute; top:0; width:calc(100% - 40px); background:#fff; height:40px; border-bottom:1px solid #eee;}
    .total-rate{ float: right; margin:2px 0;}
    .catalogue{ margin-top:22px;}
    .statute-title{ overflow: hidden;}
    .statute-title h2{ font-size:18px; line-height:1.5;}
    .statute-title p{ color:#666; font-size:12px; line-height:1.2; margin:7px 0;}
    .jiathis_style_24x24{ float: left; margin:7px 0;}
    .article{ width:100%; background:#fff; box-shadow:0 2px 8px rgba(96,96,96,0.4); border-radius:3px;  position: relative;}
    .article-wrapper{ height:722px; width:100%; overflow-y:auto; -webkit-overflow-scrolling: touch; cursor:-webkit-grab;}
    .tool{ position: absolute; left:0; top:0; width:calc(100% - 5px); text-align:right; background:#fff; height:40px; line-height:40px; box-shadow:0 4px 5px rgba(255,255,255,0.8);}
    .tool a{ margin-right:20px; color:#333;}
    .tool a i{ width:20px; height:20px; display: inline-block; position: relative; top:5px; margin-right:4px; background:url('../../assets/images/icon/spirit.png') no-repeat;}
    .tool .evaluation i{ background-position:-20px 0; }
    .tool .note i{ background-position:-20px 0; }
    .tool .message i{ background-position:-40px 0; }
    .tools{ float:left; margin: 7px 0;}

    .latest-statute{ margin-top:30px; line-height:2; padding:0 10px;}
    .latest-title{ font-weight:bold; font-size:16px;}
    .statute-wrapper li a{ display:block;}
    .statute-wrapper li a:hover{ color:#15ccac;}
    .btn-block{ margin-top:10px; }
    .eval-wrapper{ padding: 10px 0;}
    .comprehensive{ margin-top:50px;}
    .comprehensive-header{ padding:20px;  background:#e9f9f6;}
    .comprehensive-header ul li{ display:inline-block; margin-right:45px; line-height:20px; font-size:16px; cursor: pointer;}
    .comprehensive-header .is-active{ color:#14a88c;}
    .comprehensive-header ul li:not(.is-active):hover{ color:#666; }
    .comprehensive-header ul li i{ width:20px; height:20px; float: left; margin-right:7px; background:url('../../assets/images/icon/spirit.png') no-repeat;}
    .comprehensive-header .evaluation i{ background-position:0 0;}
    .comprehensive-header .evaluation.is-active i{ background-position:0 -20px;}
    .comprehensive-header .note i{ background-position:-20px 0; }
    .comprehensive-header .note.is-active i{ background-position:-20px -20px;}
    .comprehensive-header .message i{ background-position:-40px 0; }
    .comprehensive-header .message.is-active i{ background-position:-40px -20px;}
    .avatar{ float:left;}
    .person{ margin-left: 50px; height:40px;}
    .name{ font-size:16px; margin-bottom:2px;}
    .content{ line-height:22px; margin-top:10px;}
    .wr-item{ padding:20px; border-bottom:1px solid #999;}
    .wr-item .time{ margin-top:25px; color:#999;  font-size:12px;}
    .no-more{ color:#999; padding:50px; text-align:center;}
    .no-more .ivu-icon{ margin-right:2px; }
    .ivu-rate-text span{ font-size:14px; }
    .line-more{ line-height:40px; }
    .message-modal{ padding:20px 20px 20px 0; margin-left:15px; border-bottom:1px solid #ccc;}
    .message-header{ float: left; padding-right: 40px; border-right: 1px solid #ccc; text-align:center;}
    .message-header .name{ color:#14a88c; text-align:center; margin: 14px 0;}
    .message-header .time{ color:#666; font-size:12px; text-align:center;}
    .message-body{ margin-left:120px;}
    .message-body .content{ margin:0;}
    .leave-word{ margin-top:24px; }
    .leave-main{ margin-left:44px; }
    .leave-main .name{ line-height:32px; }
    .leave-word .content{ margin-top:10px;}

    .btn-green{ background:#14a88c; color:#fff; border-radius:3px; transition:all 0.2s linear;}
    .btn-green:hover{ background:#15ccac; }
    .page{ width:calc(100% - 5px); text-align: center; position: absolute; bottom:-1px; background:#fff; padding:15px 0; box-shadow:0 -4px 5px rgba(255,255,255,0.8);}
    .page span{ position: absolute; color:#666; right:40px; line-height:30px; }
    .btn-download{ padding: 5px 10px; display: inline-block;}

    @media (max-width:992px) {
        .statute-right,.tools,.tool,.jiathis_style_24x24,.total-rate,.comprehensive,.statute-title{ 
            display: none;
        }
        .statute-name{ padding:0;}
        .wrapper{
            width:100%;
            padding:0 15px;
            margin:20px auto
        }
        .statute-left{
            width:100%;
            margin:0 auto;
        }
        .article{
            top:0;
            left:0;
            bottom:0;
            right:0;
            position: fixed;
            
            background: rgb(99, 99, 99);
            z-index: 2000;
        }
        .article-wrapper{
            display: flex;
            justify-content: center;
            /* align-items: center; */
            padding-top:20px;
        }
        .page{ box-shadow: none; width:100%;}
        .btn-green{ width:80px; height:26px; line-height: 26px; font-size: 12px;}
    }
</style>